<template>
    <view class="container">
        <!-- 头部 -->
        <view class="header">
            <uni-icons type="chat" size="24" color="#fff"></uni-icons>
            <text class="title">留言板</text>
            <text class="subtitle">分享您的想法与建议</text>
        </view>

        <!-- 内容区 -->
        <view class="content">
            <button class="add-btn" @click="addMessage">
                <uni-icons type="plus" size="16" color="#fff"></uni-icons>
                添加留言
            </button>

            <!-- 留言列表 -->
            <view v-if="tableData.length === 0" class="empty">暂无留言</view>
            <view v-else class="list">
                <view v-for="(item, index) in tableData" :key="index" class="item">
                    <view class="item-header">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-status" :class="{ 'answered': item.answer }">
                            {{ item.answer? '已回复' : '待回复' }}
                        </text>
                    </view>
                    <text class="item-content">{{ item.content }}</text>
                    <view class="item-footer">
                        <text class="item-time">{{ item.createTime }}</text>
                        <view class="actions">
                            <text @click="readDetail(item)">查看</text>
                            <text v-if="!item.answer" @click="editor(item)">编辑</text>
                            <text @click="_delete(item)">删除</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 分页 -->
            <uni-pagination v-if="total > 10" :total="total" :current="cp" :pageSize="10" @change="changeCP" />
        </view>

        <!-- 添加/编辑弹窗 -->
        <view v-if="isFormPopupVisible" class="popup-mask" @click="handleClose">
            <view class="form-popup" @click.stop>
                <text class="form-title">{{ messageTitle }}</text>
                <view class="form-content">
                    <input v-model="message.title" placeholder="请输入标题（最多50个字符）" maxlength="50" class="input" />
                    <textarea v-model="message.content" placeholder="请输入留言内容" maxlength="500" class="textarea" />
                </view>
                <view class="form-buttons">
                    <button @click="handleClose">取消</button>
                    <button @click="dialogSure">确定</button>
                </view>
            </view>
        </view>

        <!-- 详情弹窗 -->
        <view v-if="isDetailPopupVisible" class="popup-mask" @click="closeDetailPopup">
            <view class="detail-popup" @click.stop>
                <text class="detail-title">{{ selfMessage.title }}</text>

                <view class="message">
                    <text class="message-author">{{ selfName }}</text>
                    <text class="message-time">{{ selfMessage.createTime }}</text>
                    <text class="message-content">{{ selfMessage.content }}</text>
                </view>

                <view v-if="selfMessage.answer" class="reply">
                    <text class="reply-author">管理员</text>
                    <text class="reply-time">{{ selfMessage.answerTime }}</text>
                    <text class="reply-content">{{ selfMessage.answer }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            message: {
                title: "",
                content: "",
                id: ""
            },
            tableData: [],
            cp: 1,
            total: 0,
            messageTitle: "添加留言",
            selfName: "",
            selfMessage: {
                title: "",
                content: "",
                createTime: "",
                answer: "",
                answerTime: ""
            },
            isFormPopupVisible: false,
            isDetailPopupVisible: false
        };
    },
    onShow() {
        this.getMessageList();
    },
    methods: {
        // 保持与PC版完全相同的接口调用
        getMessageList() {
            uni.request({
                url: "http://localhost:8081/api/message/getSelfList",
                method: "POST",
                data: {
                    cp: this.cp,
                    user_id: uni.getStorageSync('user').user_id
                },
                success: (res) => {
                    this.tableData = res.data.data.data.map(item => ({
                        ...item,
                        createTime: item.createTime.split('.')[0].replace('T', ' '),
                        answerTime: item.answerTime? item.answerTime.split('.')[0].replace('T', ' ') : ''
                    }));
                    this.total = res.data.data.total;
                },
                fail: (err) => {
                    console.error('获取留言列表失败:', err);
                    uni.showToast({
                        title: '获取留言列表失败',
                        icon: 'none'
                    });
                }
            });
        },
        changeCP(e) {
            this.cp = e.current;
            this.getMessageList();
        },
        addMessage() {
            this.messageTitle = "添加留言";
            this.message = {
                title: "",
                content: "",
                id: ""
            };
            this.isFormPopupVisible = true;
        },
        editor(item) {
            this.messageTitle = "编辑留言";
            this.message = {
                title: item.title,
                content: item.content,
                id: item.id
            };
            this.isFormPopupVisible = true;
        },
        _delete(item) {
            uni.showModal({
                title: "提示",
                content: "确定要删除这条留言吗？删除后无法恢复",
                success: (res) => {
                    if (res.confirm) {
                        uni.request({
                            url: "http://localhost:8081/api/message/delete",
                            method: "POST",
                            data: {
                                id: item.id
                            },
                            success: (res) => {
                                if (res.data.code === "001") {
                                    this.getMessageList();
                                    uni.showToast({
                                        title: res.data.msg
                                    });
                                } else {
                                    uni.showToast({
                                        title: res.data.msg,
                                        icon: "none"
                                    });
                                }
                            },
                            fail: (err) => {
                                console.error('删除留言失败:', err);
                                uni.showToast({
                                    title: '删除留言失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                }
            });
        },
        readDetail(item) {
            this.selfMessage = {
                ...item
            };
            this.selfName = uni.getStorageSync('user').userName || "";
            this.isDetailPopupVisible = true;
        },
        handleClose() {
            this.isFormPopupVisible = false;
        },
        closeDetailPopup() {
            this.isDetailPopupVisible = false;
        },
        dialogSure() {
            if (!this.message.title) {
                uni.showToast({
                    title: '请输入标题',
                    icon: 'none'
                });
                return;
            }
            if (!this.message.content) {
                uni.showToast({
                    title: '请输入留言内容',
                    icon: 'none'
                });
                return;
            }
            uni.showLoading({
                title: '正在提交...'
            });
            const api = this.messageTitle === "添加留言"?
                "http://localhost:8081/api/message/addMessage" :
                "http://localhost:8081/api/message/update";

            const data = this.messageTitle === "添加留言"?
                {
                    title: this.message.title,
                    content: this.message.content,
                    user_id: uni.getStorageSync('user').user_id
                } :
                {
                    title: this.message.title,
                    content: this.message.content,
                    id: this.message.id
                };

            uni.request({
                url: api,
                method: "POST",
                data,
                success: (res) => {
                    uni.hideLoading();
                    if (res.data.code === "001") {
                        this.getMessageList();
                        this.isFormPopupVisible = false;
                        uni.showToast({
                            title: res.data.msg
                        });
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            icon: "none"
                        });
                    }
                },
                fail: (err) => {
                    uni.hideLoading();
                    console.error('提交留言失败:', err);
                    uni.showToast({
                        title: '提交留言失败',
                        icon: 'none'
                    });
                }
            });
        }
    }
};
</script>

<style>
.container {
    padding: 20rpx;
}

.header {
    background: #409EFF;
    padding: 30rpx;
    border-radius: 10rpx;
    color: #fff;
    margin-bottom: 20rpx;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    margin-left: 10rpx;
}

.subtitle {
    font-size: 24rpx;
    display: block;
    margin-top: 10rpx;
}

.add-btn {
    background: #409EFF;
    color: #fff;
    border-radius: 50rpx;
    margin-bottom: 30rpx;
}

.empty {
    text-align: center;
    color: #999;
    padding: 100rpx 0;
}

.list {
    margin-bottom: 30rpx;
}

.item {
    background: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
}

.item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.item-title {
    font-size: 32rpx;
    font-weight: bold;
}

.item-status {
    color: #67C23A;
    font-size: 24rpx;
}

.item-status.answered {
    color: #909399;
}

.item-content {
    color: #666;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.item-footer {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #999;
}

.actions text {
    margin-left: 30rpx;
    color: #409EFF;
}

/* 弹窗遮罩层 */
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 表单弹窗 */
.form-popup {
    background: #fff;
    padding: 40rpx;
    border-radius: 20rpx;
    width: 80%;
}

.form-title {
    font-size: 32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 30rpx;
}

.input,
.textarea {
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    width: 100%;
}

.textarea {
    height: 200rpx;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
}

.form-buttons button {
    margin-left: 30rpx;
    padding: 0 40rpx;
}

/* 详情弹窗 */
.detail-popup {
    background: #fff;
    padding: 40rpx;
    border-radius: 20rpx;
    width: 90%;
}

.detail-title {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 30rpx;
}

.message,
.reply {
    margin-bottom: 40rpx;
}

.message-author,
.reply-author {
    font-weight: bold;
    display: block;
}

.message-time,
.reply-time {
    font-size: 24rpx;
    color: #999;
    display: block;
    margin: 10rpx 0;
}

.message-content,
.reply-content {
    line-height: 1.6;
}
</style>    